<template>
  <div class="exchange-record-container">
    <!-- 导航栏 -->
    <van-nav-bar title="兑换记录" left-text="返回" left-arrow @click-left="onClickLeft" />

    <!-- 兑换记录列表 -->
    <div v-if="exchangeRecords.length > 0" class="exchange-list">
      <div v-for="(record, index) in exchangeRecords" :key="index" class="exchange-item">
        <img :src="record.img" alt="Item Image" class="item-image"/>
        <div class="item-details">
          <h3>{{ record.goodsName }}</h3>
          <p>兑换时间: {{ record.createTime }}</p>
          <p>消耗积分: {{ record.pointXiao }} 积分</p>
          <p>兑换数量: {{ record.num }}</p>
        </div>
      </div>
    </div>

    <!-- 如果没有兑换记录 -->
    <div v-else class="no-exchange-records">
      <p>您还没有任何兑换记录。</p>
    </div>
  </div>
</template>

<script setup>
import { ref, } from 'vue';
import { useRouter } from 'vue-router';
import { OderListByUserId } from "@/api/goods"; // 假设有一个获取兑换历史的API

const router = useRouter();

// 点击返回按钮
const onClickLeft = () => {
  router.back(); // 返回上一页
};

// 兑换记录数据
const exchangeRecords = ref({
  goodsName:"",
  img:"",
  num:"",
  createTime:"",
  pointXiao:""
});

// 获取兑换记录
function getExchangeRecords() {
  OderListByUserId().then(res => {
    if (res.data.code === 200000){
      exchangeRecords.value = res.data.data;
    }else {
      alert(res.data.errorMessage);
    }
  })
}
getExchangeRecords();


</script>

<style scoped>
.exchange-record-container {
  padding: 16px;
}

.exchange-list {
  margin-top: 8px;
}

.exchange-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding: 16px 0;
}

.item-image {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  margin-right: 16px;
}

.item-details {
  flex-grow: 1;
}

.no-exchange-records {
  text-align: center;
  margin-top: 24px;
}

.load-more-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background-color: #07c160;
  color: white;
  border: none;
  border-radius: 4px;
  margin-top: 16px;
  cursor: pointer;
}
</style>